<script setup>
import {ref} from 'vue';
import {message} from 'ant-design-vue';
import RepairManagementAddForm from '@/views/repairManagement/repairManagementAddForm.vue';
import RepairManagementQueryForm from '@/views/repairManagement/repairManagementQueryForm.vue';
import {useRepairManagementStore} from '@/stores/repairManagementStore.js';
import {repairManagementDelete} from '@/api/repairManagementApi.js';
import {loading} from '@/utils/loadingUtils.js'
import {PlusOutlined} from '@ant-design/icons-vue';
import * as commonDict from '@/utils/commonDict.js';


const columns = [

  {
    title: '报修人ID',
    dataIndex: 'residentId',
    width: 300,
    align: 'center'
  },

  {
    title: '报修类型',
    dataIndex: 'repairType',
    width: 300,
    align: 'center'
  },

  {
    title: '报修描述',
    dataIndex: 'repairDescription',
    width: 300,
    align: 'center'
  },

  {
    title: '报修日期',
    dataIndex: 'repairDate',
    width: 300,
    align: 'center'
  },

  {
    title: '报修状态',
    dataIndex: 'status',
    width: 300,
    align: 'center'
  },

  {
    title: '创建时间',
    dataIndex: 'createTime',
    width: 300,
    align: 'center'
  },

  {
    title: '操作',
    dataIndex: 'action',
  },

]
const formRef = ref(null)


const repairManagementStore = useRepairManagementStore()
repairManagementStore.getRepairManagementPage()


async function handleDelete(id) {
  await repairManagementDelete(id)
  message.success('删除成功')
  await repairManagementStore.getRepairManagementPage()
}
</script>

<template>

  <RepairManagementAddForm ref="formRef"
                           @save-successful="repairManagementStore.getRepairManagementPage"></RepairManagementAddForm>
  <RepairManagementQueryForm></RepairManagementQueryForm>

  <a-card :bordered="false" class="mt-2">
    <a-table bordered :columns="columns" :data-source="repairManagementStore.repairManagementPage" :loading="loading">

      <template #title>
        <div class="flex justify-between">
          <a-space>
            <a-button @click="formRef.onOpen()" type="primary">
              <template #prefix>
                <PlusOutlined/>
              </template>
              新增
            </a-button>
          </a-space>
        </div>
      </template>

      <template #bodyCell="{ text, record, column }">

        <template v-if="column.dataIndex === 'status'">
          {{ commonDict.paymentStatus[text] }}
        </template>

        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a-button type="link" @click="formRef.onOpen(record.id)">编辑</a-button>
            <a-popconfirm
                title="是否确认删除?"
                ok-text="删除"
                cancel-text="取消"
                @confirm="handleDelete(record.id)"
            >
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>


    </a-table>

  </a-card>
</template>

<style scoped>

</style>
